<template>
	<div class="zfile-admin-alarm-setting">
		<el-card v-loading="loading">
			<div class="alarm-setting-title">
				<h3 class="text-lg leading-6 font-medium text-gray-900">
					告警设置
				</h3>
				<label class="alarm-setting-desc">用以设置每种告警的接收用户</label>
			</div>
			<div class="alarm-setting-content">
				<div class="content-sider">
					<div v-for="item in topicList.value"
						:class="[activeKey == item.topic ? 'topic-item-active' : 'topic-item']" :key="item.topic"
						@click="fetchUserByTopic(item.topic)">
						{{ item.name }}
					</div>
				</div>
				<div class="content-wrapper" v-if="!contentLoading.value">
					<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate"
						@change="handleCheckAllChange">全选</el-checkbox>
					<el-checkbox-group v-model="checkedUsers" @change="handleCheckedUserhange">
						<el-checkbox v-for="user in userList.value" :key="user.id" :label="user.id">
							{{ user.name }}
						</el-checkbox>
					</el-checkbox-group>
				</div>
			</div>
			<div class="confirm-wrapper">
				<el-button @click="saveAlarmSetting" :loading="saveLoading" type="primary">保存</el-button>
			</div>
		</el-card>
	</div>
</template>

<script setup>
import { cloneDeep, clone } from "lodash";
import {
	loadTopicsReq,
	loadAllUsersReq,
	loadUserByTopic,
	saveTopicSetting
} from "~/api/alarm-setting";
import useStorageList from "~/composables/admin/storage/storage-list";
let router = useRouter();

let contentLoading = ref(true);
let saveLoading = ref(false);
let userList = reactive([]);
let topicList = reactive([]);
let activeKey = reactive("")
let checkedUsers = ref([])
let checkAll = ref(false)
let isIndeterminate = ref(true)
const {
	loading,
} = useStorageList(router);

onMounted(() => {
	loadTopicsList();
	loadUserList();
});

const loadTopicsList = () => {
	loadTopicsReq().then((response) => {
		topicList.value = cloneDeep(response.data);
		
		if (topicList.value.length) {
			fetchUserByTopic(response.data[0].topic);
		}
	})
		.catch(err => {
			ElMessage.error(err.msg)
		})
};

const loadUserList = () => {
	loadAllUsersReq().then((response) => {
		userList.value = cloneDeep(response.data);
	})
		.catch(err => {
			ElMessage.error(err.msg)
		})
};

const fetchUserByTopic = (str) => {
	activeKey = clone(str);
	checkedUsers.value = [];
	contentLoading.value = true;
	loadUserByTopic(str).then((response) => {
		checkedUsers.value = cloneDeep(response.data);
		checkAll.value = response.data.length === userList.value.length;
		isIndeterminate.value = response.data.length > 0 && response.data.length < userList.value.length;
		contentLoading.value = false;
	})
		.catch(err => {
			ElMessage.error(err.msg)
		})
};

const handleCheckAllChange = (val) => {
	checkedUsers.value = val ? userList.value : []
	isIndeterminate.value = false
};

const handleCheckedUserhange = (value) => {
	const checkedCount = value.length
	checkedUsers.value = value;
	checkAll.value = checkedCount === userList.value.length
	isIndeterminate.value = checkedCount > 0 && checkedCount < userList.value.length
};

const saveAlarmSetting = () => {
	let filtered = topicList.value.filter(topic => topic.topic == activeKey)[0]
	if (filtered) {
		let params = {
			topic: activeKey,
			topicId: filtered.id,
			userIds: checkedUsers.value
		};
		saveLoading.value = true;

		saveTopicSetting(params)
			.then(res => {
				if (res && res.data) {
					saveLoading.value = false;
					ElMessage.success("修改告警设置成功");
					fetchUserByTopic(activeKey)
				}
			})
			.catch(err => {
				saveLoading.value = false;
				ElMessage.error(err.msg)
			})
	}

};

</script>

<style lang="scss" scoped>
.zfile-admin-alarm-setting {
	:deep(.el-card__body) {
		min-height: 460px;
	}

	:deep(.el-checkbox) {
		margin: 0 20px 20px 0;
	}

	:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
		color: inherit;
	}

	.alarm-setting-title {
		height: 48px;
		line-height: 48px;
	}

	.alarm-setting-content {
		display: flex;
	}

	.alarm-setting-desc {
		color: rgb(107, 114, 128);
		font-size: 14px;
	}

	.content-sider {
		margin-top: 20px;
		width: 170px;
		cursor: pointer;
	}

	.content-wrapper {
		width: calc(100% - 170px);
		margin: 20px 0 0 30px;
	}

	.confirm-wrapper {
		float: right;
		margin: 0 50px 50px 0;
	}

	.topic-item {
		height: 76px;
		line-height: 76px;
		font-size: 15px;
		cursor: pointer;
		text-align: center;
	}

	.topic-item-active {
		height: 76px;
		line-height: 76px;
		font-size: 15px;
		cursor: pointer;
		text-align: center;
		background-color: rgb(17, 136, 238, .6);
		color: #fff;
	}
}
</style>

<route lang="yaml">
  meta:
    layout: admin
    name: 告警设置
  </route>